<template>
  <div>
    <b-alert
      dismissible variant="danger"
      :show="showAlert" @dismissed="showAlert=false"
    >数据加载失败</b-alert>
    <b-alert
      v-if="uploadSuccess" dismissible
      :show="showUpdateAlert" variant="success" @dismissed="showUpdateAlert=false"
    >修改成功</b-alert>
    <b-alert
      v-else dismissible
      :show="showUpdateAlert" variant="danger" @dismissed="showUpdateAlert=false"
    >修改失败</b-alert>
    <b-card class="luke-table-sm">
      <b-row slot="header">
        <h3 class="luke-table-heading">大老板结算</h3>
        <b-button variant="primary" class="luke-table-refresh" @click="refresh">
          刷新
        </b-button>
      </b-row>
      <b-table
        striped bordered responsive show-empty
        :items="items" :fields="fields"
      >
        <template slot="empty">
          <p class="luke-loading-text">加载中...</p>
        </template>

        <template slot="judgeCol" scope="data">
            <b-button
              class="luke-btn" variant="primary"
              @click="makeJudge(data.item.did, 1)"
            >是</b-button>
            <b-button
              class="luke-btn" variant="primary"
              @click="makeJudge(data.item.did, 2)"
            >否</b-button>
        </template>
      </b-table>
    </b-card>
  </div>
</template>

<style scoped>
  .row {
    padding: 10px;
  }
  .luke-input, .luke-btn {
    min-width: 55px;
    flex: 1;
    overflow: hidden
  }
  .luke-btn {
    text-align: center;
  }
</style>

<script>
  import Config from '@/assets/global-config'
  import axios from 'axios'
  export default {
    name: 'Judge',
    data () {
      return {
        fields: {
          did: { label: 'ID' },
          contents: { label: '事件内容' },
          judgeCol: { label: '是否正确' }
        },
        items: [
          { contents: 'hahaha' },
          { contents: 'hehehe' }
        ],
        showAlert: false,
        showUpdateAlert: false,
        uploadSuccess: false
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData (callback) {
        let originData = this.items
        this.items = []
        var that = this
        axios.post(Config.list_judge_action())
        .then(function (response) {
          that.showAlert = false
          that.showUpdateAlert = false
          that.items = response.data
          if (callback) {
            callback()
          }
        })
        .catch(function (error) {
          console.log(error)
          that.showAlert = true
          that.items = originData
        })
      },
      refresh () {
        this.fetchData()
      },
      makeJudge (did, value) {
        this.json = {
          did: did,
          balance: value
        }
        axios.post(Config.make_judge_action(), JSON.stringify(this.json))
        .then((response) => {
          console.log(response)
          if (response.status === 200 && response.data.rescode === 1) {
            this.refresh()
          } else {
            this.uploadSuccess = false
            this.showUpdateAlert = true
          }
        })
        .catch((error) => {
          console.log(error)
          this.uploadSuccess = false
          this.showUpdateAlert = true
        })
      }
    }
  }
</script>
